final_ojs = transpose(final_data_ojs);


// Create a dropdown menu for region
viewof regionDropdown = Inputs.select(
  final_ojs.map(d => d.region),
  {
    label: "Select Region",
    unique: true
  }
)

// Filter cities based on the selected region
filteredCities = final_ojs.filter(d => d.region === regionDropdown)

// Create a dropdown menu for cities
viewof cityDropdown = Inputs.select(
  filteredCities.map(d => d.city),
  {
    label: "Select City",
    unique: true
  }
)

// Filter users based on the selected region and city
filteredUsers = final_ojs.filter(d => d.region === regionDropdown && d.city === cityDropdown)


// Create a dropdown menu for users
viewof userDropdown = Inputs.select(
  filteredUsers.map(d => d.short_user),
  {
    label: "Select User",
    unique: true
  }
)

//// Filter data based on the selected region,city and user
 filtered_data = final_ojs.filter(d => d.region === regionDropdown && d.city === cityDropdown && d.short_user === userDropdown).map((d, i) => ({ ...d, id: i + 1 }))

function valueBox(value, label, color = "lightgreen") {
  return html`<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; 
    width: 350px; height: 300px; background-color: ${color}; border-radius: 10px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); 
    font-family: Arial, sans-serif;">
    <div style="font-size: 24px; font-weight: bold;">${value}</div>
    <div style="font-size: 14px; color: gray;">${label}</div>
  </div>`;
}

// Example usage
viewof myValueBox = valueBox("Placeholder", "Alerted Emotions", "lightgreen");